<template>
	<page-meta :page-style="'overflow:'+(true?'hidden':'visible')"></page-meta>
	<status-bar :scroll-top="scrollTop" @updateVisibleHeight="updateVisibleHeight">
		<!-- <view class="home-header-box"> </view> -->
		<view class="header-seek-box">
			<view class="header-seek-box__left_btn">
				<image class="icons" src="../../static/icon_food.png"  style="display: block; width: 20px; height: 15.5px;" mode="widthFix"></image>
				<text>拼单</text>
			</view>
		</view>
		
		<view :class="['home-header-content']">
			<view class="home-header-left">
				<img class="home-header-img" src="@/static/logo.png" alt="">
			</view>
			<view class="home-header-right">
				<text>伴你炸鸡(博罗店)</text>
				<view>
					幸福是什么？就是你下单那一刻
				</view>
			</view>
		</view>
		
		<view class="home-scroll-menu">
			<!-- <view class="home-scroll-menu-title">下单</view> -->
			<view class="home-scroll-menu-header-title">满38.00元免配送费</view>
			<view class="menu-content">
				<view class="menu-left-box">
					<view class="menu-left-items" :class="{'active':index===current}" v-for="item,index in leftMenuList"
						:key="index">{{item.name}}</view>
				</view>
				<view class="menu-right-box">
					<scroll-view class="scroll-view_H" :style="`height: ${scrollHeight}px;`" scroll-y="true"
						@scroll="onScroll" :scroll-with-animation="true" :enable-passive="true" :enhanced="true"
						:show-scrollbar="false">
						<view class="menu-right-item" v-for="item,index in rightmenu" :key="index" @click="gopage">
							<image class="menu-right-item-img" src="../../static/p1.jpg" mode="widthFix"></image>
							<view class="menu-right-item-text">
								<text class="menu-right-item-text-title">{{item.name}}</text>
								<view class="menu-right-item-text-price">
									￥{{item.salesPrice}}
									<text class="menu-right-item-text-price-out">
										￥{{item.losePrice}}
									</text>
								</view>
								<view class="menu-right-btn">
									<view class="menu-right-btn-minus" @click="minusNumber(item)">-</view>
									<text class="menu-right-btn-text">{{item.count}}</text>
									<view class="menu-right-btn-add" @click="addNumber(item)">+</view>
								</view>
							</view>
						</view>
						<view style="height: 200px; font-size: 12px; color: #c6c6c6;">
							没有其它了
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	
	</status-bar>
	<view class="footer-box">
		<view class="footer-box-left">
			<text class="footer-box-left-text">{{totalNumber}}</text>
		</view>
		<view class="footer-box-center">
			合计
			<text class="footer-box-center-blod">{{totalPrice}}</text>
		</view>
		<view class="footer-box-right">
			选好了
		</view>
	</view>
</template>

<script>
	import statusBar from '@/components/status-bar.vue'
	import { fetchGoodsList } from '@/service/fetchGoods.js'
	let dataList = []
	const query = uni.createSelectorQuery()

	function getItemHeiht() {
		return new Promise((resolve, reject) => {
			query.select('.menu-right-item').fields({
				node: true,
				size: true
			}).exec((res) => {
				resolve(res[0].height)
			})
		})
	}

	export default {
		components: {
			statusBar
		},
		data() {
			return {
				totalNumber: 0,
				totalPrice: 0,
				current: 0,
				visibleHeight: 0,
				statusBarHeight: 0,
				windowHeight: 0,
				scrollTop: 0,
				rightmenu: [],
				leftMenuList: [],
			}
		},
		computed: {
			scrollHeight() {
				// 减去头部的那几个块元素的高度 
				// 21 是header的高度
				// 90 是中间内容部分
				// return this.visibleHeight - 21 - 90 - 27- 29 ;
				return this.visibleHeight - 90 - 29 - 27;
			}
		},
		async onLoad() { },
		async onReady() {
			this.initData()
			// 为了配合获取元素高度，才这么做
			this.$nextTick(() => {
				setTimeout(async () => {
					const height = await getItemHeiht()
					let leftItemMaxHeight = 0
					for (let i = 0; i < dataList.length; i++) {
						let groupItem = dataList[i]
						let itemCountlen = (groupItem.children.length) * height
						let lmo = {
							index: i,
							name: groupItem.category,
							maxHeight: leftItemMaxHeight + itemCountlen
						}
						leftItemMaxHeight = leftItemMaxHeight + itemCountlen
						this.leftMenuList.push(lmo)
					}
				}, 10)
			})
		},
		methods: {
			gopage() {
				uni.navigateTo({
					url: '/pages/detail/detail'
				})
			},
			minusNumber(item) {
				if(!item.count) {
					return
				}
				item.count --
				this.totalNumber --
				this.totalPrice = this.totalPrice  - item.salesPrice
			},
			
			addNumber(item) {
				item.count ++
				this.totalNumber ++
				this.totalPrice =  this.totalPrice  + item.salesPrice
			},
			
			async initData() {
				const res = fetchGoodsList()
				dataList = res
				let leftItemMaxHeight = 0
				for (let i = 0; i < res.length; i++) {
					let groupItem = res[i]
					groupItem.children.forEach((item) => {
						item.nodeLeng = groupItem.children.length
						item.count = 0
						this.rightmenu.push(item)
					})
				}
			},
			
			updateVisibleHeight(e) {
				this.visibleHeight = e
			},
			
			onScroll(e) {
				const { scrollTop } = e.detail
				const res = this.leftMenuList.find((item) => {
					return scrollTop < item.maxHeight
				})
				this.current = res.index
				// if (scrollTop > 100) {
				// 	console.log('开启了');
				// 	this.scrollTop = 1000
				// 	return
				// }
				// if (scrollTop <= 100) {
				// 	this.scrollTop = 0
				// 	return
				// }
			}
		}
	}
</script>
<style lang="scss">
	@import "../../uni.scss";
	.menu-right-item {
		display: flex;
		padding: 10px 0;
	}

	.menu-right-item-img {
		border-radius: 5px;
		display: block;
		width: 80px;
		height: 80px;
	}

	.menu-right-item-text {
		flex: 1;
		padding-left: 10px;

	}

	.menu-right-item-text-title {
		font-size: 16px;
		font-weight: bold;
	}

	.menu-right-item-text-price {
		margin-top: 8px;
		font-weight: bold;
		color: #ea6141;
	}

	.menu-right-item-text-price-out {
		font-weight: 400;
		font-size: 13px;
		color: $gray-color;
		text-decoration: line-through;
	}

	.menu-left-items {
		padding: 15px 5px;
		font-size: 13px;
	}

	.menu-left-items.active {
		border-left: 3px solid $color-primary;
		font-weight: bold;
	}

	.home-header-right {
		flex: 1;
		font-size: 14px;
		padding-left: 15px;
		padding-top: 5px;
	}

	.home-header-box {
		height: 21px;
		background-color: #fff;
		/* padding-top: 35px; */
	}

	.home-scroll-menu-header-title {
		color: $gray-color;
		font-size: 13px;
		padding: 5px 10px;
	}

	.home-header-content {
		padding: 0 10px 15px;
		display: flex;
		/* background-color: mediumaquamarine; */
		transition: all 0.3s;
	}

	.home-header-content.active {
		padding: 80px 10px 10px;
	}

	.home-header-img {
		display: block;
		width: 50px;
		height: 50px;
		border-radius: 50%;
	}

	.home-scroll-menu {
		background-color: #fff;
	}

	.home-scroll-menu-title {
		text-align: center;
		/* background-color: #cfcfcf; */
		padding: 5px 10px;
		font-size: 14px;
	}

	.menu-left-box {
		color: #505050;
		width: 80px;
	}

	.menu-right-box {
		flex: 1;
		padding-left: 10px;
	}

	.menu-content {
		display: flex;
	}
	.menu-right-btn {
		display: flex;
		justify-content: flex-end;
		padding: 0 15px;
	}
	.menu-right-btn-text {
		text-align: center;
		display: inline-block;
		width: 20px;
		font-size: 13px;
		height: 23px;
		line-height: 23px;
	}
.menu-right-btn-add,.menu-right-btn-minus {
	font-size: 12px;
	width: 23px;
	height: 23px;
	line-height: 23px;
	text-align: center;
	border-radius: 4px;
	background-color: $color-primary;
	color: #fff;
	border: 1px solid #a7a7a7;
}
.menu-right-btn-add:active,.menu-right-btn-minus:active {
	opacity: 0.5;
	border: 1px solid $color-primary;
}
.footer-box {
	// height: 35px;
	position: fixed;
	bottom: 0;
	left:0;
	right: 0;
	background: #fff;
	border-top: 1px solid #dedede;
	display: flex;
}
.footer-box-left-text {
	position: absolute;
	right: -5px;
	top: -5px;
	z-index: 1;
	width: 20px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	font-size: 12px;
	background-color: $color-primary;;
	border-radius: 50%;
	color: #fff;
}
.footer-box-left {
	background: url(@/static/shop.png) no-repeat;
	background-size: 30px 30px;
	background-position: center;
	width: 45px;
	position: relative;
	// background-color: $color-primary;
}
.footer-box-center {
	flex: 1;
	font-size: 15px;
	line-height: 50px;
	padding-left: 10px;
}
.footer-box-right {
	background-color:$color-primary;
	color: #fff;
	margin: 5px;
	font-size: 15px;
	border-radius: 4px;
	width: 123px;
	padding: 10px 0;
	text-align: center;
}
.footer-box-center-blod {
	font-weight: bold;
	font-size: 18px;
}
.header-seek-box {
	display: flex;
	padding: 0 10px 15px;
	&__left_btn {
		display: flex;
		align-items: center;
		padding: 7rpx 15rpx;
		font-size: 30rpx;
		font-weight: bold;
		border-radius: 50px;
		border: 1px solid #cfcfcf;
		.icons {
			margin-right: 5px;
			width: 40rpx;
			display: block;
		}
	}
}
</style>